<template>
    <div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						注册
					</h1>
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">
									用户名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" v-model="name" placeholder="请在这里输入用户名"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									真实姓名:
								</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="username" placeholder="请在这里输入真实姓名"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="password1" v-model="password1" placeholder="请输入您的密码"/>
								</td>
							</tr>
                            <tr>
								<td valign="middle" align="right">
									确认密码:
								</td>
								<td valign="middle" align="left">
									<input type="password" class="inputgri" name="password" v-model="password" placeholder="请再次输入您的密码"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">
									性别:
								</td>
								<td valign="middle" align="left">
									男
									<input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
									女
									<input type="radio" class="inputgri" name="sex" value="f"/>
								</td>
							</tr>

						</table>
						<p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<!--							<input type="submit"  @click="u_register" class="button" value=" 注册  " />-->
                            <el-button  plain type="success"  @click="u_register">注册</el-button>
						</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return {
                name:"",
                password:"",
                password1:"",
            }
        },
        methods:{
            //点击事件注册
            u_register(){
                this.$axios({
                    url:"http://127.0.0.1:8000/api/register/",
                    method:"post",
                    data:{
                        u_name:this.name,
                        password:this.password,   //第二个框的密码值,此密码为入库密码
                        password1:this.password1  //第一个框的密码值
                    }
                }).then(res=>{   //成功之后走这个
                    console.log(res.data);

                    console.log(res.data.status["message"]);
                    if (res.data.status["message"]){
                        console.log('这是经过校验之后的返回值,注册成功')
                        //下面是用ui美化之后的显示成功的提示框
                        this.$notify({
                          title: '成功',
                          message: '注册成功',
                          type: 'success'
                        });
                        //注册成功跳转至登录页面
                        this.$router.push("/login")
                    }
                    else{
                        console.log('这是经过校验之后的返回值,注册失败')
                        console.log(error)
                        // alert('信息校验失败')  //之后用ui修改框样式
                        this.$notify({
                          title: '警告',
                          message: ',输入框不能为空,用户名不能重复或密码必须相同,请重新注册',
                          type: 'warning',
                          position: 'top-left'
                        });
                    }
                }).catch(error=>{ //失败走这个
                    console.log(error);
                    // alert('注册时显示错误的详细信息')
                    this.$notify({
                          title: '警告',
                          message: ',输入框不能为空,用户名不能重复或密码必须相同,请重新注册',
                          type: 'warning',
                          position: 'top-left'
                        });
                })
            }
        }
    }
</script>

<style scoped>

</style>
